<template>
    <view class="u-page">
        <!-- 顶部 -->
        <view class="top_img_box">
            <image src="/static/home/header_img.png" mode="widthFix" alt="" />
        </view>

        <view class="shop_home_container">
            <!-- 爆款套餐 -->
            <view class="shop_middle_box">
                <view class="middle_title">
                    <image src="/static/home/img_title_left.png" class="shop_middle_box_image" alt="" />
                    <span>爆款套餐</span>
                    <image src="/static/home/img_title_right.png" class="shop_middle_box_image" alt="" />
                </view>
                <view class="middle_tab">
                    <view
                        class="middle_all"
                        v-for="(item, index) in tabList"
                        :key="item.id"
                        :class="{ middle_all_active: tabCurrent === item.id }"
                        @click="changeTab(item, index)"
                    >
                        <view class="middle_all_img">
                            <image :src="item.img" alt="" class="middle_top_img" />
                        </view>
                        <view class="middle_all_name">{{ item.name }}</view>
                    </view>
                </view>
            </view>

            <!-- 套餐详情 -->
            <view class="home_package_box" v-for="(item, index) in packageList" :key="item.id">
                <view class="home_package_all">
                    <!-- 顶部 -->
                    <view class="package_top_box">
                        <view class="package_top_title">{{ item.name }}</view>
                    </view>

                    <!-- 中间 -->
                    <view class="package_middle_box" @click="handleShowAge(item, index)">
                        <view class="package_middle_img_box">
                            <image :src="imageUrl.packagesImgUrl + item.head_img" class="package_middle_img"></image>
							
                        </view>
                        <view class="package_top_img" v-if="index < 3">
                            <!-- <image :src="`/static/home/icon-top-${index + 1}.png`" class="top_img" /> -->
							<image src="/static/home/icon-top-one.png" mode="" class="top_img" v-if="index == 0"></image>
							<image src="/static/home/icon-top-two.png" mode="" class="top_img" v-else-if="index == 1"></image>
							<image src="/static/home/icon-top-three.png" mode="" class="top_img" v-else-if="index == 2"></image>
                        </view>
                        <view class="package_middle_con_box">
                            <view class="pacakge_tip_box" v-if="item.shop_tag_ids">
                                <view
                                    class="pacakge_tip_all"
                                    v-for="itemTag in item.shop_tag_ids"
                                    :key="itemTag.id"
                                    :style="{ color: itemTag.font_color, border: `1px solid ${itemTag.background_color}` }"
                                >
                                    {{ itemTag.tag }}
                                </view>
                            </view>
                            <view class="package_middle_tip_box" v-else>
                                <view v-for="(items, indexs) in item.channe_info" :key="indexs">
                                    <view
                                        class="package_middle_tip_one"
                                        :class="[
                                            indexs == 0 ? 'package_middle_tip_one' : '' || 
                                            indexs == 1 ? 'package_middle_tip_two' : '' || 
                                            indexs == 2 ? 'package_middle_tip_three' : '' || 
                                            indexs == 3 ? 'package_middle_tip_four' : '' || 
                                            indexs == 4 ? 'package_middle_tip_five' : '' || 
                                            indexs == 5 ? 'package_middle_tip_six' : '' || 
                                            indexs == 6 ? 'package_middle_tip_seven' : '' || 
                                            indexs == 7 ? 'package_middle_tip_eight' : '' || 
                                            indexs == 8 ? 'package_middle_tip_nine' : ''
                                        ]"
                                    >
                                        {{ items }}
                                    </view>
                                </view>
                            </view>

                            <view class="package_flow_box" v-if="item.generalized && item.directional && item.call">
                                <view class="package_flow" v-for="(flow, flowIndex) in [item.generalized, item.directional, item.call]" :key="flowIndex">
                                    <view class="flow_title">{{ flow }}</view>
                                    <view class="flow_name">{{ ['通用流量', '定向流量', '通话时长'][flowIndex] }}</view>
                                </view>
                            </view>

                            <view class="package_sales">
                                <span class="package_sales_title">销量：</span>
                                <span>{{ item.sales_volume ? item.sales_volume : 0 }}</span>
                            </view>
                        </view>
                    </view>

                    <!-- 亮点和按钮 -->
                    <view class="package_bright_box">
                        <view class="package_bright_title">产品亮点: {{ item.yj || '暂无' }}</view>
                        <view class="package_handle_btn" @click="handlerTransact(item)">立即办理</view>
                    </view>
                </view>

                <view class="home_package_other" v-if="isShowAge === index + 1">
                    <view class="handle_age_box">
                        <view class="age_icon_box">
                            <image src="/static/home/icon-card.png" class="age_icon"></image>
                        </view>
                        <view class="age_title">办理年龄: {{ interceptInfo.age }}岁</view>
                    </view>

                    <view class="handle_age_box">
                        <view class="age_icon_box">
                            <image src="/static/home/icon-address.png" class="age_icon"></image>
                        </view>
                        <view class="age_title">不发货地址: {{ interceptInfo.address }}</view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 一键登录弹窗 -->
        <view class="popup_login_box" v-if="showLogin">
            <view class="login_title">请先一键登录</view>
            <view class="login_btn" @click="handlerLogin">一键登录</view>
            <view class="popup_close_box" @click="handlerClose">
                <image src="/static/home/icon-cancel.png" class="popup_close"></image>
            </view>
        </view>

        <!-- 遮罩层 -->
        <view class="mask" v-if="showLogin" @click="handlerClose"></view>

        <!-- 客服 -->
   <!--     <view class="custom_btn_box">
            <image src="/static/icon-custom-new.png" class="custom_btn_icon" @click="handleCustom"></image>
        </view> -->
    </view>
</template>

<script>
	import imgUrl from '@/utils/image.js'
	import imageUrl from '@/utils/image.js'
	// import provinceList from '@/utils/province.js';
	import baseAgentId from '@/utils/agentId.js'
	export default {
		data() {
			return {
				appId: 'ks697213517937611366',
				secret: 'Cw9FGS5TbboBa8Zgb_ZvQQ',
				userCode: '',
				openId: '',
				showLogin: false,
				channeId: '',
				// 消息公告
				noticeList: [],
				packageBannerObj: {},
				// packageList: [],
				imageUrl: '',
				clickId: '',
				accountCode: '',
				vicePackageId: '',
				agentId: '',
				tabList: [
					{
						id: 2,
						name: '中国移动',
						img:'/static/home/img_yidong.png'
					},
					{
						id: 3,
						name: '中国联通',
						img:'/static/home/img_dianxin.png'
					},
					{
						id: 1,
						name: '中国电信',
						img:'/static/home/img_liantong.png'
					},
					{
						id: 4,
						name: '中国广电',
						img:'/static/home/img_guangdian.png'
					},
					{
						id: 0,
						name: '全部',
						img:'/static/home/img_all.png'
					},
				],
				tabCurrent: 0,
				tabCurrents: 0,
				packageList: [],
				imgPackageUrl: '',
				pageObj: {
					pageNow: 1,
					pageSize: 5
				},
				total: 0,
				interceptInfo: {},
				isShowAge: null,
			}
		},
		onShow() {
			// if (!uni.getStorageSync('openId')) {
			// 	this.showLogin = true
			// }
			this.imgPackageUrl = imageUrl;
		},
		onLoad(option) {
			this.imageUrl = imgUrl
			if (option.channe_id) {
				this.channeId = option.channe_id
			} else {
				this.channeId = 35
			}

			if (option.clickid) {
				this.clickId = option.clickid
			} else {
				this.clickId = ''
			}

			if (option.account_code) {
				this.accountCode = option.account_code
			} else {
				this.accountCode = ''
			}

			if (option.vice_packageId) {
				this.vicePackageId = option.vice_packageId
			} else {
				this.vicePackageId = ''
			}

			if (option.agent_id) {
				this.agentId = option.agent_id
			} else {
				this.agentId = baseAgentId.agentId
			}

			this.getChanneId()
			// this.getAllPackage()
			this.getPackageList()
		},
		onReachBottom() {
			// if (this.pageObj.pageNow < this.total) {
			// 	this.pageObj.pageNow++;
			// 	this.getPackageList();
			// } else if (this.pageObj.pageNow == this.total) {
			// 	uni.showToast({
			// 		title: '到底啦',
			// 		icon: 'none'
			// 	});
			// 	return;
			// }
		},

		methods: {
			// 登录
			getLogin() {
				this.$request('/ksLogin', {
					code: this.userCode,
					appid: this.appId,
					secret: this.secret
				}, 'POST').then(res => {
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					})
					uni.setStorageSync('openId', res.open_id)
					this.openId = res.open_id
					this.showLogin = false
				})
			},
			// 获取套餐列表
			getPackageList() {
				this.$request('/getAllPackage', {
					channe_id: this.channeId,
					app_id: this.appId,
					agent_id: this.agentId,
					type:this.tabCurrent
				}, 'GET').then(res => {
					if (res.code == 1) {
						this.packageList = res.package.package
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						}) 
						return
					}
				})
			},
			// 切换tab
			changeTab(item, index) {
				console.log(item,index)
				this.tabCurrent = item.id;
				// this.pageObj.pageNow = 1;
				this.packageList = [];
				this.getPackageList();
			},
			// 立即办理
			handlerTransact(val) {
				console.log(val)
				uni.navigateTo({
					url: `/pages/package/package?channeId=${this.channeId}&packageId=${val.id}&clickid=${this.clickId}`
				})
			},
			
			// 获取渠道
			getChanneId() {
				this.$request('/channeList', {
					channe_id: this.channeId,
					app_id: this.appId,
					agent_id: this.agentId
				}, 'GET').then(res => {
					if (res.code == 1) {
						this.packageBannerObj = res.data
						const noticeArr = []
						noticeArr.push(res.data.notice ? res.data.notice : '')
						this.noticeList = noticeArr
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},
			
			// 一键登录
			handlerLogin() {
				const that = this
				uni.login({
					force: false,
					success(res) {
						that.userCode = res.code
						that.getLogin()
					},
					fail(res) {},
				});
			},
			
			// 关闭登录弹窗
			handlerClose() {
				this.showLogin = false
			},
			// 获取办理年龄和不发货地址
			// getH5InterceptInfo(val) {
			// 	uni.request({
			// 		url:'https://landing.zibojinchi.com/api/getH5InterceptInfo',
			// 		data:{
			// 			package_id: val.id
			// 		},
			// 		method:'POST'
			// 	}).then((res) => {
			// 		if (res.data.code == 1) {
			// 			this.interceptInfo = res.data.data.interceptInfo;
			// 		} else {
			// 			uni.showToast({
			// 				title: res.data.msg,
			// 				icon: 'none'
			// 			});
			// 			return;
			// 		}
			// 	});
			// },
			
			
			
			handleShowAge(item, index) {
				// this.getH5InterceptInfo(item);
				// if (!this.isShowAge) {
				// 	this.isShowAge = index + 1;
				// } else {
				// 	this.isShowAge = null;
				// }
			},
			
			

			// 点击套餐
			// handlerPackage(val) {
				// if (!uni.getStorageSync('openId')) {
				// 	this.showLogin = true
				// 	return
				// }


				// uni.navigateTo({
				// 	url: `/pages/package/package?channeId=${val.channe_id}&packageId=${val.package.id}&clickid=${this.clickId}&account_code=${this.accountCode}&vice_packageId=${this.vicePackageId}`
				// uni.navigateTo({
					// url: `/pages/package/package?channeId=${this.channeId}&packageId=${val.id}&clickid=${this.clickId}`
				// })
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.u-page{
		min-height: 100vh;
		background-color: #f4f4f4;
		padding-top: 18rpx;
		padding-bottom: 16rpx;
	}
	.custom_btn_box {
		position: fixed;
		right: 0;
		bottom: 160rpx;
		.custom_btn_icon {
			width: 80px;
			height: 80px;
		}
	}
	
	.top_img_box {
		width: 100%;
		image{
			width: 100%;
		}
	}
	
	.shop_home_container {
		padding: 0rpx 21rpx 0;
	
		
	
		.shop_top_box {
			background: #fff;
			box-shadow: 0px 12rpx 40rpx 17rpx rgba(172, 168, 168, 0.06);
			border-radius: 12rpx;
			padding: 31rpx 0 36rpx 26rpx;
	
			.top_introduce_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f5f5f5;
				padding-bottom: 38rpx;
	
				.left_box {
					display: flex;
					align-items: center;
	
					.avatar_box {
						width: 90rpx;
						height: 90rpx;
						margin-right: 32rpx;
						box-shadow: 0px 12px 40px 17px rgba(172, 168, 168, 0.06);
	
						.avatar {
							width: 100%;
							height: 100%;
							border-radius: 6rpx;
						}
					}
	
					.title_box {
						.top_title_box {
							display: flex;
							align-items: center;
							width: 240rpx;
							padding-bottom: 18rpx;
	
							.top_title {
								height: 40rpx;
								font-size: 30rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #333333;
								padding-right: 16rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
							}
	
							.top_icon_box {
								width: 32rpx;
								height: 32rpx;
								background: linear-gradient(180deg, #89b3ff, #4c8bff);
								border-radius: 10rpx;
								font-size: 24rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #ffffff;
								text-align: center;
								line-height: 32rpx;
							}
						}
	
						.tip_box {
							display: flex;
							align-items: center;
	
							.tip_icon_box {
								width: 30rpx;
								height: 30rpx;
								margin-right: 13rpx;
	
								.tip_icon {
									width: 100%;
									height: 100%;
								}
							}
	
							.tip_title_box {
								display: flex;
								align-items: center;
								font-size: 24rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #f2b032;
	
								.tip_line {
									width: 1px;
									height: 17rpx;
									background: #f5c976;
									margin: 0 20rpx;
								}
							}
						}
					}
				}
	
				.right_box {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
	
					.promotion_box {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 177rpx;
						height: 48rpx;
						opacity: 1;
						border-radius: 160rpx 0px 0px 160rpx;
						background: #d9e8ff;
						margin-bottom: 18rpx;
	
						.promotion_title {
							font-size: 22rpx;
							font-weight: 500;
							letter-spacing: 0px;
							line-height: 48rpx;
							color: #4f96ff;
							padding-right: 10rpx;
						}
	
						.promotion_img_box {
							width: 40rpx;
							height: 40rpx;
	
							.promotion_img {
								width: 100%;
								height: 100%;
							}
						}
					}
	
					.sell_box {
						width: 177rpx;
						height: 45rpx;
						background: #ffeded;
						border-radius: 23rpx 0px 0px 23rpx;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #fc3838;
						text-align: center;
						line-height: 45rpx;
					}
				}
			}
	
			.top_options_box {
				padding: 28rpx 21rpx 35rpx 0;
	
				.options_title_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
	
					.left_box {
						display: flex;
						align-items: center;
	
						.options_title {
							font-size: 34rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							padding-right: 23rpx;
						}
	
						.options_score {
							font-size: 46rpx;
							font-family: my-font;
							font-weight: bold;
							color: #fc3838;
						}
					}
	
					.right_box {
						display: flex;
						align-items: center;
	
						.options_star {
						}
	
						.option_exceed {
							font-size: 24rpx;
							font-family: my-font;
							font-weight: 400;
							color: #333333;
							padding-left: 27rpx;
						}
					}
				}
	
				.options_evaluate_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #f5f5f5;
					padding: 39rpx 0;
	
					.options_evaluate_all {
						position: relative;
	
						.evaluate_img_box {
							width: 207rpx;
							height: 92rpx;
	
							.evaluate_img {
								width: 100%;
								height: 100%;
							}
						}
	
						.evaluate_high {
							position: absolute;
							top: 4rpx;
							left: 10rpx;
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #fc3838;
						}
	
						.evaluate_data_box {
							position: absolute;
							top: 6rpx;
							left: 70rpx;
	
							.data_num {
								font-size: 34rpx;
								font-family: my-font;
								font-weight: bold;
								color: #4d4d4d;
								padding-bottom: 6rpx;
							}
	
							.data_title {
								font-size: 26rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #808080;
							}
						}
					}
				}
			}
	
			.top_money_box {
				padding: 0 20rpx 0 0;
	
				.merchant_qualification_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 31rpx;
	
					.left_box {
						display: flex;
						align-items: center;
	
						.merchant_icon_box {
							width: 32rpx;
							height: 32rpx;
							margin-right: 17rpx;
	
							.merchant_icon {
								width: 100%;
								height: 100%;
							}
						}
	
						.merchant_title {
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #4d4d4d;
						}
					}
	
					.right_box {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #808080;
					}
				}
	
				.earnest_money_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
	
					.left_box {
						display: flex;
						align-items: center;
	
						.earnest_icon_box {
							width: 32rpx;
							height: 32rpx;
							margin-right: 17rpx;
	
							.earnest_icon {
								width: 100%;
								height: 100%;
							}
						}
	
						.earnest_title {
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #4d4d4d;
						}
					}
	
					.right_box {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #808080;
					}
				}
			}
		}
	
		.shop_middle_box {
			background: #ffffff;
			border: 1px solid #f6f6f6;
			box-shadow: 0px 12rpx 40rpx 17rpx rgba(172, 168, 168, 0.06);
			border-radius: 12rpx;
			// padding-top: 22rpx;
			margin-top: 17rpx;
	
			.middle_title {
				height: 69rpx;
				background-color: #FCFCFC;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: MiSans;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
				line-height: 34px;
				span{
					padding: 0 19rpx;
				}
				.shop_middle_box_image{
					width: 164rpx;
					height: 18rpx;
				}
			}
	
			.middle_tab {
				padding-top: 27rpx;
				padding-bottom: 19rpx;
				display: flex;
				justify-content: space-around;
	
				.middle_all {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 24rpx;
					color: #000;
					.middle_all_img{
						display: flex;
						align-items: center;
						width: 82rpx;
						height: 82rpx;
						.middle_top_img{
							width: 100%;
							height: 100%;
						}
					}
					
					.middle_all_name{
						font-size: 24rpx;
						display: flex;
						align-items: center;
					}
	
					.middle_line {
						width: 30rpx;
						height: 4rpx;
						border-radius: 30rpx;
						background: transparent;
						margin-top: 6rpx;
					}
				}
	
				.middle_all_active {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 32rpx;
					color: #4c8bff;
	
					.middle_line {
						width: 30rpx;
						height: 4rpx;
						border-radius: 30rpx;
						background: #4c8bff;
						margin-top: 6rpx;
					}
				}
			}
		}
	
		.home_package_box {
			margin-top: 15rpx;
			position: relative;
			background: #ffffff;
			box-shadow: 0px 6rpx 6rpx 1px #ececec;
			border-radius: 16rpx;
			border: 1px solid #f5f5f5;
			margin-bottom: 12rpx;
			padding: 25rpx 21rpx 18rpx 22rpx;
	
			.home_package_all {
				.package_top_box {
					display: flex;
					justify-content: space-between;
					padding-bottom: 26rpx;
	
					.package_top_title {
						// width: 520rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #262626;
					}
	
					.package_top_check {
						width: 100rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 26rpx;
						color: #808080;
					}
				}
	
				.package_middle_box {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					position: relative;
	
					.package_middle_img_box {
						width: 212rpx;
						height: 212rpx;
	
						.package_middle_img {
							width: 100%;
							height: 100%;
						}
					}
	
					.package_top_img {
						position: absolute;
						top: 0;
						left: 10rpx;
	
						.top_img {
							width: 40rpx;
							height: 54rpx;
						}
					}
	
					.package_middle_con_box {
						width: 409rpx;
	
						.pacakge_tip_box {
							display: flex;
							flex-wrap: wrap;
							padding: 10rpx 0 30rpx;
	
							.pacakge_tip_all {
								padding: 0 6rpx;
								border-radius: 6rpx;
								margin: 0 6rpx 6rpx 0;
								font-size: 24rpx;
							}
	
							.package_tip_free {
								background: #ffe8d6;
								color: #ff7b0c;
								font-size: 24rpx;
								padding: 3rpx 4rpx;
								margin-right: 20rpx;
							}
	
							.package_tip_official {
								background: #e4ffe8;
								color: #2fc247;
								font-size: 24rpx;
								padding: 3rpx 4rpx;
							}
						}
	
						.package_flow_box {
							display: flex;
							align-items: center;
	
							.package_flow {
								width: 119rpx;
								display: flex;
								flex-direction: column;
								align-items: center;
	
								.flow_title {
									font-family: Source Han Sans CN;
									font-weight: bold;
									font-size: 27rpx;
									color: #262626;
								}
	
								.flow_name {
									font-family: Source Han Sans CN;
									font-weight: 400;
									font-size: 22rpx;
									color: #808080;
								}
							}
							
	
							.flow_line {
								width: 2rpx;
								height: 31rpx;
								background: #e6e6e6;
								border: 2rpx solid #e6e6e6;
								// margin: 0 28rpx;
							}
						}
						
						.package_sales {
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-style: 29rpx;
							// font-weight: 550;
							color: #333333;
							padding-top: 10rpx;
							color: #FF2728;
							.package_sales_title{
								font-size: 23rpx;
								font-weight: 400;
							}
						}
	
						.package_middle_tip_box {
							display: flex;
							flex-wrap: wrap;
							padding: 10rpx 0 20rpx;
	
							.package_middle_tip_one {
								margin: 2rpx 0;
								display: flex;
								align-items: center;
								justify-content: center;
								min-width: 111rpx;
								height: 32rpx;
								border-radius: 6rpx;
								border: 1px solid #37b6ff;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: #37b6ff;
								margin-right: 19rpx;
								// margin: 0 19rpx 17rpx 0;
							}
	
							.package_middle_tip_two {
								margin: 2rpx 0;
								display: flex;
								align-items: center;
								justify-content: center;
								min-width: 111rpx;
								height: 32rpx;
								border-radius: 6rpx;
								border: 1px solid #5b67ca;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: #5b67ca;
								margin-right: 19rpx;
							}
	
							.package_middle_tip_three {
								margin: 2rpx 0;
								display: flex;
								align-items: center;
								justify-content: center;
								min-width: 111rpx;
								height: 32rpx;
								padding: 0 3rpx;
								border-radius: 6rpx;
								border: 1px solid #cc322e;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: #cc322e;
								margin-right: 19rpx;
							}
	
							.package_middle_tip_four {
								margin: 2rpx 0;
								display: flex;
								align-items: center;
								justify-content: center;
								min-width: 111rpx;
								height: 32rpx;
								border-radius: 6rpx;
								border: 1px solid #438064;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: #438064;
								margin-right: 19rpx;
							}
	
							.package_middle_tip_five {
								margin: 2rpx 0;
								display: flex;
								align-items: center;
								justify-content: center;
								min-width: 111rpx;
								height: 32rpx;
								border-radius: 6rpx;
								border: 1px solid #cc9f53;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: #c38d23;
								margin-right: 19rpx;
							}
							.package_middle_tip_six {
								margin: 2rpx 0;
								display: flex;
								align-items: center;
								justify-content: center;
								min-width: 111rpx;
								height: 32rpx;
								border-radius: 6rpx;
								border: 1px solid #00aa7f;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: #00aa7f;
								margin-right: 19rpx;
							}
							.package_middle_tip_seven {
								margin: 2rpx 0;
								display: flex;
								align-items: center;
								justify-content: center;
								min-width: 111rpx;
								height: 32rpx;
								border-radius: 6rpx;
								border: 1px solid #0000ff;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: #0000ff;
								margin-right: 19rpx;
							}
							.package_middle_tip_eight {
								margin: 2rpx 0;
								display: flex;
								align-items: center;
								justify-content: center;
								min-width: 111rpx;
								height: 32rpx;
								border-radius: 6rpx;
								border: 1px solid #ffaaff;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: #ffaaff;
								margin-right: 19rpx;
							}
							.package_middle_tip_nine {
								margin: 2rpx 0;
								display: flex;
								align-items: center;
								justify-content: center;
								min-width: 111rpx;
								height: 32rpx;
								border-radius: 6rpx;
								border: 1px solid #ff00ff;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: #ff00ff;
								margin-right: 19rpx;
							}
						}
	
						.package_middle_introduce_all {
							display: flex;
							align-items: center;
							justify-content: space-evenly;
							padding-top: 34rpx;
	
							.package_middle_introduce_box {
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
	
								.package_middle_introduce_num {
									font-family: Source Han Sans CN;
									font-weight: bold;
									font-size: 29rpx;
									color: #262626;
								}
	
								.package_middle_introduce_title {
									font-family: Source Han Sans CN;
									font-weight: 400;
									font-size: 24rpx;
									color: #808080;
								}
							}
	
							.package_middle_introduce_line {
								width: 2rpx;
								height: 31rpx;
								background: #e61b15;
								border: 2rpx solid #e6e6e6;
							}
						}
					}
				}
	
				.package_bright_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 12rpx 0 0;
	
					.package_bright_title {
						width: 446rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 22rpx;
						color: #4d4d4d;
					}
	
					.package_handle_btn {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 158rpx;
						height: 48rpx;
						background: linear-gradient(179deg, #ff6d6e, #ff1d1f);
						box-shadow: 0px 9rpx 5rpx 0px rgba(255, 213, 213, 0.64);
						border-radius: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 27rpx;
						color: #ffffff;
					}
				}
			}
	
			.home_package_other {
				padding-top: 16rpx;
				margin-top: 26rpx;
				border-top: 1px solid #f5f5f5;
	
				.handle_age_box:last-child {
					padding-bottom: 0;
				}
	
				.handle_age_box {
					display: flex;
					padding-bottom: 17rpx;
	
					.age_icon_box {
						width: 26rpx;
						height: 26rpx;
						margin-right: 15rpx;
	
						.age_icon {
							width: 100%;
							height: 100%;
						}
					}
	
					.age_title {
						width: 632rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 22rpx;
						color: #666666;
					}
				}
			}
		}
	}
</style>